<!--
 * @Author: Sam
 * @Date: 2020-10-22 11:51:41
 * @LastEditTime: 2021-05-18 17:36:05
 * @LastEditors: Ken
 * @Description:
 * @FilePath: \resourcesd:\vscode\ygboost-eui\src\components\app\edit\setting\servicerchannel\servicerchannelEdit.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="padding-lr-xl ">
    <el-card>
      <div slot="header" class="clearfix text-left">
        <span class="title-icon">基础配置</span>
      </div>
      <el-form :model="form" ref="basisForm" :rules="rules" size="mini">
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="客户渠道："
              label-width="120px"
              prop="customerChannelId"
            >
              <el-select
                size="mini"
                filterable
                v-model="form.customerChannelId"
                placeholder="请选择客户渠道"
              >
                <el-option
                  v-for="(label, value) in initInfo.customerChannels"
                  :key="Number(value)"
                  :label="label"
                  :value="Number(value)"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item
              label="最小运单计费量："
              label-width="120px"
              prop="minChargeWeight"
            >
              <el-input size="mini" v-model="form.minChargeWeight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态：" label-width="120px" prop="status">
              <el-select
                size="mini"
                filterable
                v-model="form.status"
                placeholder="请选择状态"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="平均到货时间：" label-width="120px">
              <el-input size="mini" v-model="form.arriveTime"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="服务商："
              label-width="120px"
              prop="servicerId"
            >
              <el-select
                size="mini"
                filterable
                v-model="form.servicerId"
                placeholder="请选择服务商"
              >
                <el-option
                  v-for="(label, value) in initInfo.servecompanys"
                  :key="Number(value)"
                  :label="label"
                  :value="Number(value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="渠道名称：" label-width="120px" prop="name">
              <el-input size="mini" v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="渠道代码：" label-width="120px" prop="code">
              <el-input size="mini" v-model="form.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          label="渠道能力："
          label-width="120px"
          prop="channelAbility1"
        >
          <el-checkbox-group size="mini" v-model="form.channelAbility1">
            <el-checkbox
              v-for="item in initInfo.channelAbilitys"
              :key="item.id"
              :label="`${item.id}`"
              name="channelAbility"
            >
              {{ item.category }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="特殊产品："
          label-width="120px"
          prop="specialProduct1"
        >
          <el-checkbox-group size="mini" v-model="form.specialProduct1">
            <el-checkbox
              v-for="item in initInfo.specialProducts"
              :key="item.id"
              :label="`${item.id}`"
              name="specialProduct"
            >
              {{ item.category }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="是否包税：" label-width="120px" prop="other1">
              <el-checkbox-group size="mini" v-model="form.other1">
                <el-checkbox label="32" name="other2">是</el-checkbox>
                <el-checkbox label="38" name="other2">否</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货条款：" label-width="120px" prop="other2">
              <el-checkbox-group size="mini" v-model="form.other2">
                <el-checkbox label="29" name="other3">DDP</el-checkbox>
                <el-checkbox label="28" name="other3">DDU</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="margin-top">
      <div slot="header" class="clearfix text-left">
        <span class="title-icon">价格表</span>
      </div>
      <el-tabs type="border-card" v-model="timeActiveName" v-if="tableInfo && tableInfo.channelUseTimes" @tab-click="handleUserTimeClick">
        <el-tab-pane v-for="relateIterm in tableInfo.channelUseTimes" :key="relateIterm.id" :label="relateIterm.time" :name="`${relateIterm.id}`">
          <el-tabs v-model="activeName" @tab-click="handleClick" v-if="tableInfo">
            <el-tab-pane
              v-for="item in tableInfo.channelLoadingPorts"
              :key="item.id"
              :label="
            `${initInfo.loadPortAddress[item.consignmentPlaceId]} +${
              item.price
            }`
          "
              :name="`${item.consignmentPlaceId}`"
            >
              <TableComponent
                v-if="activeName == item.consignmentPlaceId"
                :status="`t${item.id}`"
                :tableColumns="tableInfo.channelChargingSections"
                :tableData="tableInfo.channelSubareas"
                :channelFormulaMap="tableInfo.channelFormulaMap"
                :countrys="initInfo.countrys"
                :countryStates="initInfo.countryStates"
              />
            </el-tab-pane>
          </el-tabs>
          <div v-else>暂无价格</div>
        </el-tab-pane>
      </el-tabs>
      <div v-else>暂无价格</div>


    </el-card>

    <el-dialog
      title="渠道说明"
      :visible.sync="showTinymce"
      width="50%"
      :modal="false"
    >
      <tinymce v-model="form.channelExplain" :height="500" />
    </el-dialog>
  </div>
</template>

<script>
import { m } from "@/store/yg/common/local";
import { ajax } from "@/store/yg/common/utils";
import { clone } from "@/utils/clone";
import TableComponent from "./TableComponent";
const Tinymce = () => import("@/components/app/components/Tinymce");
export default {
  components: {
    TableComponent,
    Tinymce
  },
  data() {
    return {
      showTinymce: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      activeName: "",
      timeActiveName: "",
      form: {
        customerChannelId: "",
        status: "",
        name: "",
        code: "",
        arriveTime: "",
        channelExplain: "",
        minChargeCount: "",
        minChargeWeight: "",
        bulkfactorRule: "",
        channelAbility1: [],
        specialProduct1: [],
        other1: [],
        other2: [],
        channelAbility: [],
        specialProduct: [],
        other: [],
        servicerId: ""
      },
      initInfo: {},
      channelAbilitys: [],
      others: [],
      specialProducts: [],
      volumeWightRules: [],
      loadPortAddress: [],
      countrys: [],
      countryStates: [],
      rules: {
        minChargeCount: [
          { required: false, message: "请填写正整数", trigger: "blur" },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "须为数字,可留3位小数"
          }
        ],
        minChargeWeight: [
          { required: false, message: "请填写正整数", trigger: "blur" },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "须为数字,可留3位小数"
          }
        ],
        servicerId: [
          { required: true, message: "请选择服务商", trigger: "change" }
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        name: [{ required: true, message: "请填写渠道名称", trigger: "blur" }],
        code: [{ required: true, message: "请选择渠道代码", trigger: "blur" }],
        bulkfactorRule: [
          { required: true, message: "请选择体积重规则", trigger: "change" }
        ],
        customerChannelId: [
          { required: true, message: "请选择体积重规则", trigger: "change" }
        ],
        channelAbility1: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ],
        specialProduct1: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ],
        other1: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ],
        other2: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ]
      },
      tableInfo: null
    };
  },
  computed: {},
  props: ["field"],
  mounted() {
    this.init();
    // 存在即是编辑
    console.log("this.$store.state.edit.row :>> ", this.$store.state.edit.row);
    if (this.$store.state.edit.row.id) {
      const form = this.$store.state.edit.row;
      this.form.id = this.$store.state.edit.id;
      console.log(
        "%cthis.form.id: ",
        "color: MidnightBlue; background: Aquamarine;",
        this.form
      );
      const other = form.other.split(",");
      this.form.status = form.status ? form.status.toString() : "";
      this.form.servicerId = form.servicerId;
      //? form.servicerId.toString() : "";
      this.form.name = form.name;
      this.form.code = form.code;
      this.form.customerChannelId = form.customerChannelId;
      // ? form.customerChannelId.toString()
      // : "";
      this.form.arriveTime = form.arriveTime;
      this.form.channelExplain = form.channelExplain;
      this.form.minChargeCount = form.minChargeCount;
      this.form.minChargeWeight = form.minChargeWeight;
      this.form.bulkfactorRule = form.bulkfactorRule;
      this.form.channelAbility1 = form.channelAbility
        ? form.channelAbility.split(",")
        : "";
      this.form.specialProduct1 = form.specialProduct
        ? form.specialProduct.split(",")
        : ["53"];
      this.form.other1 = other.filter(x => x === "32" || x === "38");
      this.form.other2 = other.filter(x => x === "29" || x === "28");
      this.form.channelAbility = form.channelAbility;
      this.form.specialProduct = form.specialProduct;
      this.form.other = form.other;
    }
  },
  methods: {
    async init() {
      const initInfo = await ajax("initservicerChannelData", {});
      this.initInfo = initInfo;
      //console.log(this.initInfo);
      if (this.$store.state.edit.row.id) {
        ajax("querySerChannelById", {
          servicerChannelId: this.$store.state.edit.row.id,
          consignmentPlaceId: null
        })
          .then(res => {
            if (res && res.channelLoadingPorts) {
              console.log(res.channelLoadingPorts[0].consignmentPlaceId);
              this.activeName =
                res.channelLoadingPorts[0].consignmentPlaceId + "";
            }
            if (
              res &&
              res.channelUseTimes &&
              res.channelUseTimes.length > 0
            ) {
              this.timeActiveName = res.channelUseTimes[0].id.toString();
            }
            this.tableInfo = res;
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    m(k) {
      return m(k);
    },
    callbefore() {
      this.$store.state.edit.row = this.form;
      console.log("submit", this.$store.state.edit.row);
    },
    callvalidate() {
      this.$refs.basisForm.validate(valid => {
        if (valid) {
          console.log("submit");
          const cloneData = clone(this.form);
          this.form.channelAbility = cloneData.channelAbility1.toString();
          this.form.specialProduct = cloneData.specialProduct1.toString();
          this.form.other = [
            ...cloneData.other1,
            ...cloneData.other2
          ].toString();
        } else {
          console.log("error submit!!");
          this.form.channelAbility = [];
          this.form.specialProduct = [];
          this.form.other = [];
          return false;
        }
      });

      return true;
    },
    handleUserTimeClick(tab){
      console.log("activeName",tab.name);
      ajax("querySerChannelById", {
        servicerChannelId: this.$store.state.edit.row.id,
        relateId: parseInt(tab.name)
      })
        .then(res => {
          this.tableInfo = res;
          if (res && res.channelLoadingPorts) {
            console.log(res.channelLoadingPorts[0].consignmentPlaceId);
            this.activeName =
              res.channelLoadingPorts[0].consignmentPlaceId + "";
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleClick(tab) {
      ajax("querySerChannelById", {
        servicerChannelId: this.$store.state.edit.row.id,
        consignmentPlaceId: parseInt(tab.name),
        relateId: parseInt(this.timeActiveName)
      })
        .then(res => {
          this.tableInfo = res;
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

<style scoped>
.el-select {
  width: 100%;
}
.padding-lr-xl >>> .el-dialog__header {
  text-align: left;
}
</style>
